<template>
  <el-card
    class="searchForm"
    :body-style="{
      display: 'flex',
      'justify-content': 'space-between',
      'align-items': 'center',
    }"
  >
    <div>
      <el-button
        type="primary"
        @click="handleAdd"
        v-permission="props.addPermissionKey"
      >
        新增
      </el-button>
    </div>
    <div>
      <el-input
        v-model="value"
        placeholder="请输入内容"
        class="searchInput"
        @input="handleInput"
        @keyup.enter="handleSearch"
      >
        <template #append>
          <el-button :icon="Search" @click="handleSearch" />
        </template>
      </el-input>
      <el-button class="clear" @click="handleClear"> 重置 </el-button>
    </div>
  </el-card>
</template>

<script setup lang="ts">
import { Search } from '@element-plus/icons-vue'
import { ref, watch } from 'vue'

const props = defineProps({
  filter: {
    type: String,
    required: true,
  },
  addPermissionKey: {
    type: String,
    default: '',
  },
})

interface EmitsType {
  (e: 'update:filter', filter: string): void
  (e: 'handleSearch', filter: string): void
  (e: 'handleClear'): void
  (e: 'handleAdd'): void
}
const emit = defineEmits<EmitsType>()

const value = ref(props.filter)

watch(
  () => props.filter,
  (newValue) => {
    value.value = newValue
  },
)

const handleInput = (value: string) => {
  emit('update:filter', value)
}
const handleClear = () => {
  emit('handleClear')
}
const handleSearch = () => {
  emit('handleSearch', value.value)
}
const handleAdd = () => {
  emit('handleAdd')
}
</script>

<style scoped lang="scss">
.searchForm {
  margin-bottom: 10px;
  .searchInput {
    width: 240px;
  }
  .clear {
    margin-left: 10px;
  }
}
</style>
